<template>
  <el-container class="height100 clearElMainDis">
    <el-main class="el-mainContent  height100 overflowYHidden " ref="managerMain">
        <el-row ref="search">
        <el-col :span="16">
          <el-form :inline="true" :model="searchdata" class="form-inline  searchForm" size="mini"  @submit.native.prevent>
            <el-form-item >
              <el-input v-model="searchdata.data.name" :placeholder="$t('name')" @keyup.enter.native="searchTableData"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" plain @click="searchTableData">{{$t('query')}}</el-button>
              <el-button @click="resetSearchTableData">{{$t('reset')}}</el-button>
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>

      <!-- 管理员列表 -->
      <el-table 
        stripe
        :data="roles.role"
        ref="multipleTable"
        :row-key="handleReserve" 
        header-cell-class-name="tableHeaderbg"
        size="small"
        :height="tableListConHeight">
        <el-table-column prop="roleName" :label="$t('rolename')"></el-table-column>
        <!-- <el-table-column prop="state" label="状态"></el-table-column> -->
        <!-- <el-table-column prop="email" label="操作"></el-table-column> -->
        <el-table-column :label="$t('operating')">
          <template slot-scope="scope">
            <el-button @click.stop="roleBatchUserBtn(scope.row)" type="primary" plain size="small" >{{$t('user')}}</el-button>

          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-pagination
        ref="pagination"
        @size-change="handleSizeChange"
        @current-change="searchTableData"
        :current-page.sync="searchdata.currpage"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="searchdata.pagelines"
        layout="prev, pager, next, total, sizes"
        background
        :total="roles.rowCount?roles.rowCount:0"
        
      ></el-pagination>
    </el-main>
    <roleBatchUser :visible.sync="roleBatchUserVisible" v-if="roleBatchUserVisible" v-bind:roleId='roleIdBatch'/>

  </el-container>
</template>

<script>
import roleBatchUser from "@/components/roleBatchUser.vue";
import { pxToRemScale } from '../utils'

export default {
  components: { roleBatchUser},
  props:["applicationId"],
  created() {
    this.searchTableData();
  },
  mounted(){
    let tem=(this.$refs.search.$el.getClientRects()[0].height+this.$refs.pagination.$el.getClientRects()[0].height)
    // this.tableListConHeight=`calc(100% - ${temp}rem)`;
    let temp = (document.documentElement.clientHeight || document.body.clientHeight) - 60 - 30 -32 -56 -tem;
    this.tableListConHeight=temp
    
  },
  data() {
    return {
      userSelectVisible: false,
      searchdata: {
        applicationid: this.applicationId,
        currpage:1,
        pagelines:10,
        data:{
          name: "",
        }
      },
      roles: [],
      roleId:"",
      multipleTable:[],
      multipleSelection:[],
      selectTimer:'',
      tableListConHeight:null,
      rolePermissionVisible:false,
      isBatch:false,
      roleBatchUserVisible:false,
      roleIdBatch:'',
    };
  },
  computed:{
    
  },
  methods: {
    resetSearchTableData(){
      this.searchdata.data.name='';
      this.searchTableData()
    },
    searchTableData() {
      // name: this.searchdata.name ,currpage:this.searchdata.currpage,pagelines:this.searchdata.pagelines
      this.$api.getRoleList(
        this.searchdata,
        {
          onSucess: resp => {
            this.roles = resp.data.data;
            this.$nextTick(() => {
            this.$refs.multipleTable.doLayout()
          })
            
          }
        }
      );
    },
    handleReserve(row){
      return row.roleId;
    },
    
    handleSizeChange(size){
      this.searchdata.pagelines=size;
      this.searchTableData();
    },
    roleBatchUserBtn(row){
      this.roleIdBatch=row.roleId;
      this.roleBatchUserVisible=true;
    }
  }
};
</script>

<style>
</style>